.ccf-ranking {
    /* padding: 1px 9px 2px; */
    padding: 3px 9px 2px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 9px;
    font-size: 11.844px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    white-space: nowrap;
}


.ccf-a {
    background-color: #b94a48;
}

.ccf-b {
    background-color: #f89406;
}

.ccf-c {
    background-color: #468847;
}

.sci-1 {
    background-color: #ff55ff;
}

.sci-Q1 {
    background-color: #ff55ff;
}
.sci-Q2 {
    background-color: #b94a48;
}
.sci-Q3 {
    background-color: #f89406;
}
.sci-Q4 {
    background-color: #468847;
}


.sciif-10 {
    background-color: #ff55ff;
}
.sciif-4 {
    background-color: #b94a48;
}
.sciif-2 {
    background-color: #f89406;
}
.sciif-1 {
    background-color: #468847;
}
.sciif-0 {
    background-color: #5555ff;
}

.ccf-verify {
    background-color: #3a87ad;
}

.ccf-none {
    background-color: grey;
}


.ccf-tooltip {
    position: relative;
    display: inline-block;
}

.ccf-tooltip .ccf-tooltiptext {
    visibility: hidden;
    background-color: #3a87ad;
    border-radius: 6px;
    padding: 5px 5px;
    font-family: sans-serif;

    position: absolute;
    z-index: 980624;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}

.ccf-tooltip:hover .ccf-tooltiptext {
    visibility: visible;
}

